<template>
  <div class="feedback-container">
    <div class="feedback-content">
      <!-- 头部 -->
      <div class="feedback-header">
        <div class="header-title">
          <span class="feedback-title">用户反馈</span>
        </div>
        <el-button class="back-button" @click="$router.back()">返回(Esc)</el-button>
      </div>

      <!-- 反馈表单 -->
      <div class="feedback-form">
        <el-form :model="feedbackForm" :rules="rules" ref="feedbackFormRef" label-width="80px">
          <el-form-item label="反馈类型" prop="type">
            <el-select v-model="feedbackForm.type" placeholder="请选择反馈类型">
              <el-option label="功能建议" value="功能建议"></el-option>
              <el-option label="问题反馈" value="问题反馈"></el-option>
              <el-option label="使用体验" value="使用体验"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="标题" prop="title">
            <el-input v-model="feedbackForm.title" placeholder="请输入反馈标题"></el-input>
          </el-form-item>
          
          <el-form-item label="内容" prop="content">
            <el-input 
              v-model="feedbackForm.content" 
              type="textarea" 
              :rows="6" 
              placeholder="请详细描述您的反馈内容..."
            ></el-input>
          </el-form-item>
          
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="feedbackForm.contact" placeholder="请留下您的联系方式（选填）"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitFeedback" :loading="submitting">提交反馈</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const feedbackFormRef = ref(null)
const submitting = ref(false)

// 表单数据
const feedbackForm = reactive({
  type: '',
  title: '',
  content: '',
  contact: ''
})

// 表单验证规则
const rules = {
  type: [
    { required: true, message: '请选择反馈类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入反馈标题', trigger: 'blur' },
    { min: 2, max: 50, message: '标题长度应在2到50个字符之间', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 10, max: 500, message: '内容长度应在10到500个字符之间', trigger: 'blur' }
  ]
}

// 提交反馈
const submitFeedback = async () => {
  if (!feedbackFormRef.value) return
  
  await feedbackFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        // 这里应该是向后端发送请求的代码
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('感谢您的反馈！我们会认真考虑您的建议。')
        resetForm()
        // 可以选择跳转回首页或留在当前页面
        // router.push('/house')
      } catch (error) {
        console.error('提交反馈失败:', error)
        ElMessage.error('提交失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  if (feedbackFormRef.value) {
    feedbackFormRef.value.resetFields()
  }
}

// 全局键盘事件处理函数
const handleKeydown = (e) => {
  // 处理Esc快捷键
  if (e.key === 'Escape') {
    e.preventDefault() // 阻止默认行为
    router.back()
  }
}

// 添加和移除事件监听
onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.feedback-container {
  height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

.feedback-content {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.feedback-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.feedback-title {
  font-size: 22px;
  font-weight: bold;
  color: #409EFF;
}

.feedback-form {
  padding: 20px 0;
}
</style>